<template>
    <div>
        <h1>父组件</h1>
        <el-form-item label="父组件的值">
            <el-input v-model="msg" />
        </el-form-item>

        <el-row :gutter="20">
            <el-col :span="12">
                <Child :msg="msg" @child-click="handlerChildClick"></Child>
            </el-col>
            <el-col :span="12">
                <el-card>
                    <h2>待办清单</h2>
                    <to-do @remove-all="removeAll" @to-list="addList"></to-do>
                    <ul>
                        <li v-for="(item, index) in list">{{ index+1 }}-{{ item }}</li>
                    </ul>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>

import { ref } from "vue"
// 引入组件s
import Child from './components/Child.vue'
import ToDo from './components/ToDo.vue'


export default {
    name: 'Event',
    components: {
        Child,
        ToDo
    },
    setup() {
        const msg = ref("我是父组件的值")
        const msgFromChild = ref("我是子组件的值")
        const list = ref([])
        const handlerChildClick = function (value) {
            msgFromChild.value = value
        }
        const addList = function(){
            list.value.push(value)
        }

        return {
            msg,
            list,
            msgFromChild,
            handlerChildClick,
            addList
        }
    }
}
</script>

<style></style>